<template>
    <div class="apply">
        <van-nav-bar :title="'申请' + config_name" left-arrow @click-left="onClickLeft" />
        <div class="apply_content">
            <div class="apply_tips">
                <van-form @submit="onSubmit" error-message-align="right" input-align="right" :readonly="status==0 || status==11">
                    <van-field v-model="name" name="name" label="姓名：" placeholder="请输入姓名"
                        :rules="[{ required: true, message: '请输入姓名' }]" />
                    <van-field v-model="identity_card_no" name="identity_card_no" label="身份证号：" placeholder="请输入身份证号"
                        :rules="[{ required: true, message: '请输入身份证号' }]" />
                    <van-field v-model="phone" name="phone" label="手机号：" placeholder="请输入手机号"
                        :rules="[{ required: true, message: '请输入手机号' }]" />
                    <van-field v-model="device_uid" name="device_uid" label="ID" placeholder="请输入水机ID"
                        :rules="[{ required: true, message: '请输入水机ID' }]" />
                    <van-field v-model="store_name" readonly  name="store_name" label="店铺名称：" placeholder="请输入店铺名称"
                        :rules="[{ required: true, message: '请输入店铺名称' }]" />
                    <van-field v-model="quota" name="quota" readonly label="申请额度："  placeholder="请输入申请额度"
                        :rules="[{ required: true, message: '请输入申请额度' }]" />
                    <div class="credit_sign" v-if="creditInfo.require_comp_cert">结业证书:</div>
                    <van-field v-if="creditInfo.require_comp_cert" name="owner_hold_url" label=""
                        :rules="[{ required: true, message: '不能为空' }]" style="padding-bottom: .6rem;">
                        <template #input>
                            <van-uploader v-model="owner_hold_url" :max-count="1" preview-size="100%"
                                :after-read="afterReadOwner" :before-delete="uploadDleteOwner">
                                <img src="../../../images/mine/tianjia.png" alt="" class="tianjia_pic"
                                    style="width: 100%;" />
                            </van-uploader>
                            <div class="tianjia_text">请上传结业证书</div>
                        </template>
                    </van-field>
                    <!-- <van-field v-if="creditInfo.config_id != 1" v-model="quota" name="quota" readonly label="完善店铺信息："
                        label-width="3rem" placeholder="去完成" is-link :rules="[{ required: true, message: '去完成' }]" /> -->
                    <div class="apply_btn" @click="getSign" v-if="status == 1 || status == 10">
                        <img src="../../../images/icon_qm.png" alt="">
                        电子签名
                    </div>
                    <div class="agree-xieyi">
                        <img @click="handleShow" class="default-tag-icon"
                            :src="!checked ? defaultCircle : defaultTagIcon" alt="">
                        我已阅读并同意<span class="agree-entry" @click="agreementShow = true">《水元万相授信协议》</span>
                    </div>
                    <van-button v-if="status == -1 || status == 1 || status == 2 || status == 10"
                        style="width: 80%;margin:0 auto;margin-top: 2rem;margin-bottom: 1rem;" round block type="info"
                        native-type="submit"
                        color="linear-gradient( 270deg, #1261E2 0%, #4A89EC 100%)">{{status == 1|| status == 10?'完成签名':'提交申请'}}</van-button>
                </van-form>
            </div>
            <van-popup v-model="show" position="bottom" :style="{ height: '40%' }" round>
                <div class="clones" @click="clone">取消</div>
                <div class="apply_tip">请签署姓名</div>
                <signature @save="handleSave" ref="signature" @close="handleClose"></signature>
            </van-popup>
            <van-popup v-model="agreementShow" position="bottom" :style="{ height: '80%' }" round closeable>
                <!-- <div class="clones" @click="agreementShow=false">取消</div> -->
                <div class="apply_tip">《水元万相授信协议》</div>
                <div class="agreement" v-html="agreement"></div>
            </van-popup>
        </div>
    </div>
</template>
<script>
import signature from '@/components/canvas'
import { getOssParams, uploadImage, uploadDelete } from "@/api/upload";
import { defaultTagIcon, defaultCircle } from '@/tool/static-img';
export default {
    components: { signature },
    data() {
        return {
            defaultTagIcon, defaultCircle,
            config_name: '',
            show: false,
            store_id: this.$route.query.store_id,
            owner_hold_url: [],
            checked: false,
            status: '',
            ids: this.$route.query.ids,
            creditInfo: {},
            name: '',
            identity_card_no: '',
            phone: '',
            device_uid: '',
            store_name: '',
            quota: '',
            comp_cert_url: '',
            seal_status: '',
            agreement: '',
            agreementShow: false,
            sign: this.$route.query.sign
        }
    },
    mounted() {
        this.getCreditInfo()
        // window.document.title = '申请' + this.name
    },
    methods: {
        getCreditInfo() {
            this.$http.post(`/store/manage/${this.store_id}/credit_info`, { config_id: this.ids })
                .then(res => {
                    window.document.title = '申请' + res.data.config_name
                    this.config_name = res.data.config_name
                    this.name = res.data.name
                    this.quota = res.data.quota
                    this.identity_card_no = res.data.identity_card_no
                    this.phone = res.data.phone
                    this.status = res.data.status
                    this.device_uid = res.data.device_uid
                    this.store_name = res.data.store_name
                    this.comp_cert_url = res.data.comp_cert_url
                    this.owner_hold_url = res.data.comp_cert_url ? [{ url: res.data.comp_cert_url }] : []
                    this.creditInfo = res.data
                    this.checked = res.data.agreement_status == 1 ? true : false
                    this.seal_status = res.data.seal_status
                    this.agreement = res.data.agreement.replace(/\n/g, '<br>')
                })
        },
        onClickLeft() {
            this.$router.go(-1)
        },
        clone() {
            this.$refs.signature.clear();
            this.show = false
        },
        handleClose() {

        },
        handleShow() {
            if(this.status==0 || this.status==11) return
            this.checked = !this.checked
        },
        // 上传
        async afterReadOwner(file) {
            try {
                // 获取OSS上传参数
                if (!this.ossParams || this.ossParams.expire_time < Date.now()) {
                    this.ossParams = await getOssParams(this.$http);
                }
                if (!this.ossParams) {
                    throw new Error("OSS参数未正确设置");
                }
                // 调用封装的上传函数
                await uploadImage(file, this.ossParams, this.owner_hold_url);
            } catch (error) {
                console.error("处理上传错误:", error);
            }
        },
        // 删除
        uploadDleteOwner(file) {
            if(this.status==0 || tiis.status==11) return
            this.owner_hold_url = uploadDelete(file, this.owner_hold_url);
            //   this.identity_card = {};
        },
        handleSave(img) {
            console.log(img);

        },
        getSign(){
            this.$http.post(`/store/manage/${this.store_id}/credit_sign_url`, 
                {
                config_id: this.ids,
                redirect_url:location.href.split('#')[0]+'#/creditSign?store_id='+this.store_id+'&ids='+this.ids}
            ).then(res => {
                // return
                window.location.href = res.data.board_url    
             })
        },
        onSubmit(values) {
            if (this.status == 1 ||this.status==10) {
                this.$http.post(`/store/manage/${this.store_id}/credit_sign`, { config_id: this.ids })
                    .then(res => {
                        this.$toast(res.message)
                        this.$router.push({ path: '/credit', query: { id: this.store_id} })
                    })
            } else {
                let params = {
                    config_id: this.ids,
                    store_name: this.store_name,
                    phone: this.phone,
                    name: this.name,
                    identity_card_no: this.identity_card_no,
                    device_uid: this.device_uid,
                    comp_cert_url: this.owner_hold_url.length>0 ? this.owner_hold_url[0].url : '',
                    agreement_status:this.checked?1:0
                }
                this.$http.post(`/store/manage/${this.store_id}/credit_submit`, params)
                    .then(res => {
                        this.$toast('提交成功')
                        this.$router.push({ path: '/credit', query: { id: this.store_id} })
                    })
            }

        }
    }
}
</script>
<style lang="scss" scoped>
::v-deep .van-icon {
    color: #333333;
}

::v-deep .van-nav-bar__title {
    color: #333333;
}

::v-deep .van-nav-bar__arrow {
    font-size: 20px;
}

::v-deep .van-nav-bar__text {
    color: #333333;
}

.tianjia_text {
    width: 100%;
    position: absolute;
    bottom: -20px;
    left: 10%;
    transform: translateX(-50%);
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    font-size: 0.24rem;
    color: #999999;
    // line-height: 17px;
    font-style: normal;
}

.credit_sign {
    width: 100%;
    padding: .2rem .32rem;
    color: #646566;
    font-size: .27rem;
    line-height: .28rem;
}

.apply {
    overflow: hidden;

    // background: ;
    .apply_content {
        // padding: .48rem .24rem;

        .apply_title {
            display: flex;
            align-items: center;
            font-family: PingFangSC, PingFang SC;
            font-weight: 500;
            font-size: .32rem;
            color: #333333;
            // line-height: 22px;
            text-align: right;
            font-style: normal;

            img {
                width: .32rem;
                height: .32rem;
                margin-right: .16rem;
            }
        }

        .apply_tips {
            // padding-top: .48rem;
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: .28rem;
            color: #333333;
            // line-height: .4rem;
            text-align: left;
            font-style: normal;
        }

        .apply_btn {
            width: 40%;
            height: .88rem;
            margin: 0 auto;
            margin-top: 1rem;
            background: #FFFFFF;
            border-radius: 8px;
            border: 1px solid #1D69E4;
            font-family: PingFangSC, PingFang SC;
            font-weight: 500;
            font-size: .32rem;
            color: #1D69E4;
            line-height: .88rem;
            text-align: center;
            font-style: normal;
            display: flex;
            align-items: center;
            justify-content: center;

            /* 水平居中 */
            img {
                width: .32rem;
                margin-right: .1rem;
            }
        }
    }

}

.clones {
    position: absolute;
    top: .2rem;
    left: .3rem;
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    font-size: .32rem;
    color: #666666;
}

.agreement {
    width: 95%;
    margin: 0 auto;
    font-size: .28rem;
    padding-top: .3rem;
    padding-bottom: .5rem;
    line-height: .5rem;
}

.apply_tip {
    width: 100%;
    padding-top: .2rem;
    text-align: center;
    margin: 0 auto;
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    font-size: .32rem;
    color: #000000;
    border-bottom: 1px solid #F2F4F5;
    padding-bottom: .2rem;
}

.agree-xieyi {
    width: 100%;
    // position: absolute;
    // left: 50%;
    // transform: translateX(-50%);
    // right: 0;
    // bottom: calc(0.36rem + constant(safe-area-inset-bottom));
    // bottom: calc(0.36rem + env(safe-area-inset-bottom));
    margin: 0 auto;
    height: 0.32rem;
    // line-height: 0.32rem;
    font-weight: 400;
    font-size: 0.23rem;
    color: #666666;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: .32rem;

    img {
        width: .32rem;
        margin-right: .1rem;
    }
}

.agree-entry {
    color: #1D69E4;
}
</style>